<template>
  <div class="login-config">
    <div class="login-config-left">
      <a-spin :spinning="loading" :tip="loadTip">
        <div class="left-card">
          <div class="left-card-title">
            系统名称
          </div>
          <div class="left-content">
            <a-input placeholder="系统名称" v-model="config.systemName" />
          </div>
        </div>
        <div class="left-card">
          <div class="left-card-title">
            系统版本号
          </div>
          <div class="left-content">
            <a-input placeholder="系统版本号" v-model="config.systemVersion" />
          </div>
        </div>
        <div class="left-card">
          <div class="left-card-title">
            系统版权
          </div>
          <div class="left-content">
            <a-input placeholder="系统版权" v-model="config.copyright" />
          </div>
        </div>
        <div class="left-card">
          <div class="left-card-title">
            公司名称
          </div>
          <div class="left-content">
            <a-input placeholder="公司名称" v-model="config.companyName" />
          </div>
        </div>
        <div class="left-card">
          <div class="left-card-title">
            公司官网
          </div>
          <div class="left-content">
            <a-input placeholder="公司官网" v-model="config.companyWebsite" />
          </div>
        </div>
        <div class="left-card">
          <div class="left-card-title">
            系统浏览器标题
          </div>
          <div class="left-content">
            <a-input
              placeholder="系统浏览器标题"
              v-model="config.browserTitle"
            />
          </div>
        </div>
        <div class="left-card">
          <div class="left-card-title">
            系统LOGO
          </div>
          <div class="left-content">
            <div class="img-box">
              <img :src="config.systemLogo" />
            </div>
            <div class="tipText">建议尺寸32*32，仅限png，最大不能超过500kb</div>
            <a-upload
              name="file"
              :action="uploadUrl"
              :data="uploadFileData"
              :showUploadList="false"
              :headers="headersConfig"
              accept=".png"
              @change="(e) => handleUploadChange(e, 'systemLogo')"
            >
              <a-button> <a-icon type="upload" /> 选择文件 </a-button>
            </a-upload>
          </div>
        </div>
        <div class="left-card">
          <div class="left-card-title">
            系统浏览器图标
          </div>
          <div class="left-content">
            <div class="img-box">
              <img :src="config.browserIcon" />
            </div>
            <div class="tipText">建议尺寸32*32，仅限png，最大不能超过500kb</div>
            <a-upload
              name="file"
              :action="uploadUrl"
              :data="uploadFileData"
              :showUploadList="false"
              :headers="headersConfig"
              accept=".png"
              @change="(e) => handleUploadChange(e, 'browserIcon')"
            >
              <a-button> <a-icon type="upload" /> 选择文件 </a-button>
            </a-upload>
          </div>
        </div>
        <div class="left-card">
          <a-button class="margin-bottom-xs" type="primary" @click="saveConfig">
            <a-icon type="save" /> 保存
          </a-button>
        </div>
      </a-spin>
    </div>
    <div class="login-config-right">
      <ViewerImg :toolbar="false">
        <img alt="" src="@/assets/img/systemPage.jpg" />
      </ViewerImg>
    </div>
  </div>
</template>
<script>
import { baseUrl } from "@/services/baseUrl";
import Vue from "vue";
import { ACCESS_TOKEN } from "@/store/mutation-types";
import { config } from "process";
import ViewerImg from "@/components/TopVUI/custom/ViewerImg";
export default {
  components: {
    ViewerImg,
  },
  data() {
    return {
      loading: false,
      loadTip: "正在加载...",
      form: this.$form.createForm(this),
      uploadUrl: baseUrl + "/document/minio/uploadfile",
      token: Vue.ls.get(ACCESS_TOKEN),
      uploadFileData: {
        bucket: "yx-cloud-vue",
      },
      headersConfig: {
        token: Vue.ls.get(ACCESS_TOKEN),
      },
      config: {
        systemName: "",
        systemLogo: "",
        systemVersion: "",
        copyright: "",
        companyName: "",
        companyWebsite: "",
        browserTitle: "",
        browserIcon: "",
      },
    };
  },
  created() {
    this.getConfig();
  },
  methods: {
    getConfig() {
      let config = {};
      this.$post("/system/config/selectAll").then((res) => {
        res.forEach((item) => {
          config[item.code] = item.value;
        });
        this.config = config;
      });
    },
    handleUploadChange(info, type) {
      this.loading = true;
      this.loadTip = "正在上传...";
      if (info.file.status === "done") {
        const res = info.file.response;
        if (res.statusCode === 200) {
          this.loading = false;
          this.config[type] = res.url;
        }
      } else if (info.file.status === "error") {
        this.$message.error(`文件上传失败`);
      }
    },
    saveConfig() {
      let param = [];
      for (let key in this.config) {
        param.push({
          code: key,
          value: this.config[key],
        });
      }
      this.$post("/system/config/save", {
        param: JSON.stringify(param),
      }).then((res) => {
        if (res.statusCode === 200) {
          this.$message.success(res.message, 1.5);
        } else {
          this.$message.error(res.message, 1.5);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.login-config {
  padding: 0 10px 10px;
  display: flex;
  .login-config-left {
    width: 480px;
    margin-right: 20px;
    height: calc(100vh - 198px);
    overflow: auto;
    .left-card {
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      margin-bottom: 10px;
      transition: 0.5s;
      .left-card-title {
        border-bottom: 1px solid #e8e8e8;
        padding: 10px;
      }
      .left-card-title::before {
        content: "●";
        font-size: 5px;
      }
      .left-content {
        padding: 10px;
        text-align: center;
        .img-box {
          height: 200px;

          img {
            height: 100%;
          }
        }
        .tipText {
          font-size: 12px;
          color: #b2b2b2;
          margin: 10px 0;
        }
      }
    }
    .left-card:hover {
      box-shadow: 0 2px 12px 0 #0000001a;
    }
    .left-card:last-child {
      border: none;
      text-align: center;
    }
  }
  .login-config-right {
    width: calc(100% - 500px);
    img {
      width: 100%;
    }
  }
}
.ant-input {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #d9d9d9;
}
.ant-input:focus,
.ant-input:hover {
  box-shadow: none !important;
}
</style>
